<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>商品详情</title>
	<style type="text/css">
		li {
			list-style-type: none;
			/* 去掉li前的点 */
			float: left;
			/*将li设置成做浮动，变为联动*/
		}

		a {
			display: block;
			/*将a变成块状*/
			width: 30vw;
			/*设置块的宽度*/
			height: 50px;
			/*设置块的长度*/
			font-family: Microsoft Yahei;
			line-height: 50px;
			/*设置字体在块中的高度*/
			background-color: #66B3FF;
			margin: 0px 0px;
			/*块里的高宽通过margin设置*/
			color: #fff;
			text-align: center;
			/*字体居中*/
			text-decoration: none;
			/*去掉下划线*/
			font-size: 15px;
			border: 5px;
			border-radius: 2px;
			border-color: black;
		}

		a:hover {
			background-color: #84C1FF;
		}

		.search {
			width: 60vw;
			border-color: cornflowerblue;
			margin-left: 150px;
			margin-top: 40px;
			height: 5vh;
			border-radius: 5px;
		}
		
		.bot1 {
			margin-top: 25px;
			margin-left: 45px;
			width: 10vw;
			height: 5vh;
			background-color: aquamarine;
			color: honeydew;
			border-radius: 5px;
			border-color: powderblue;
			font-family: Arial, Helvetica, sans-serif;
			font-size: large;
			opacity: 1;
		}

		.kind {
			margin-left: 6vw;
			margin-top: 20px;
			display: flex;
		}

		.smallKind {
			display: block;
			/*将a变成块状*/
			width: 12vw;
			/*设置块的宽度*/
			height: 50px;
			/*设置块的长度*/
			font-family: Microsoft Yahei;
			line-height: 54px;
			/*设置字体在块中的高度*/
			background-color: #66B3FF;
			margin: 0px 0px;
			/*块里的高宽通过margin设置*/
			color: #fff;
			text-align: center;
			/*字体居中*/
			text-decoration: none;
			/*去掉下划线*/
			font-size: 15px;
			border-color: black;
		}

		.bigbox {
			padding: 20px;
			display: flex;
			border: 3px solid 	#D9FFFF;
			width: 80vw;
			border-radius: 5px;
			margin-bottom: 15px;
			height: 40vh;
		}

		.label {
			height: 30vh;
			width: 55vw;
			background-color: white;
			opacity: 0.9;
			border-radius: 5px;
			margin-top: 10px;
			margin-left: 30px;
			margin-bottom: 20px;
			display: flex;
			padding: 10px;
		}

		.bigbigbox {
			margin-left: 7vw;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}

		.info {
			line-height: 40px;
			font-weight: bold;
			font-size: medium;
			margin-left: 20px;
		}

		.name {
			font-size: xx-large;
			font-weight: bolder;
			margin-left: 3vw;
		}

		.time {
			font-size: larger;
			font-weight: bold;
			margin-left: 3vw;
		}

		.bot2 {
			width: 12vw;
			height: 5vh;
			background-color: aquamarine;
			color: honeydew;
			border-radius: 5px;
			border-color: powderblue;
			font-family: Arial, Helvetica, sans-serif;
			font-size: large;
			opacity: 1;
			justify-content: flex-end;
		}
		.title{
			font-weight: bolder;
			font-size: x-large;
			margin-left: 40vw;
			margin-top: 20px;
		}
		.seller{
			margin-left: 10vw;
			border: 3px solid white;
			border-radius: 5px;
			width: 200px;
			height: 50vh;
			margin-top: 10px;
		}
	</style>
</head>

<body>


	<div>
		<ul>
			<li><a href="" th:href="@{/market/index}" >物品展示</a></li>
			<li><a href="" th:href="@{/market/chat}">消息记录</a></li>
			<li><a href="" th:href="@{/market/my}">我的咸鱼</a></li>
		</ul>
	</div>
	<div style="color: white;">我发起的聊天我发起的聊天我发起的聊天</div>
	
	<div class="title">
		我发起的聊天
	</div>

	<div style="margin-top: 20px;margin-left: 7vw;">
		<div class="bigbox" th:each="product:${chated_products}">
			<div class="label" id="label">
				<img style = "height: 30vh; width:15vw;" th:src="@{'http://127.0.0.1:8080/'+${product.picture}}">
				<div style="line-height: 50px; width: 45vw;">
					<div class="name" th:text="${product.productName}">物品名称</div>
					<div class="time" th:text="${product.time}">发布时间</div>
					<div style="display: flex">
						<div class="time">价格</div>
						<div class="time" th:text="${product.price}">价格</div>
					</div>
					<div style="display: flex">
						<div class="time">库存</div>
						<div class="time" th:text="${product.store}">库存</div>
					</div>
					<div class="time" th:text="${product.productDescribe}">物品介绍(实际上是一大堆话)</div>
				</div>
				<div style="text-align: right; font-size: large;">
					<a class="bot2" style="margin-top: 130px;" th:href="@{/market/product/info(product_id=${product.productId})}">查看详情</a>
					<a class="bot2" style="margin-top: 30px;" th:href="@{/market/chat/to(product_id=${product.productId},to_id=${product.userId})}">发起聊天</a>
				</div>
			</div>
		</div>
	</div>
    <hr/>
    <div class="title">
		我管理的商品聊天
	</div>

	<div style="margin-top: 20px;margin-left: 7vw;">
		<div style="display:flex;">
			<div style="display: flex;flex-direction: column">
			<div class="bigbox" style="width: 60vw;display: flex;" th:each="product:${seller_products}">
				<div class="label" >
					<img style = "height: 30vh; width:15vw;" th:src="@{'http://127.0.0.1:8080/'+${product.picture}}">
					<div style="line-height: 50px; width: 25vw;">
						<div class="name" th:text="${product.productName}">物品名称</div>
						<div class="time" th:text="${product.time}">发布时间</div>
						<div style="display: flex">
							<div class="time">价格</div>
							<div class="time" th:text="${product.price}">价格</div>
						</div>
						<div style="display: flex">
							<div class="time">库存</div>
							<div class="time" th:text="${product.store}">库存</div>
						</div>
						<div class="time" th:text="${product.productDescribe}">物品介绍(实际上是一大堆话)</div>
					</div>
					<!--div style="text-align: right; font-size: large;">
						<-a class="bot2" style="margin-top: 180px;" th:href="@{/market/chat/to(product_id=${product.productId},owner_id=${product.userId})}">发起聊天</a>
					</div-->
				</div>
			</div>
			</div>
			<div style="display: flex;flex-direction: column">
			<div class="seller" th:each="information:${informations}">
				<div style="text-align: right; font-size: large;">
					<a class="bot2" style="margin-top: 200px;" th:text="${information.buyer_name}" th:href="@{/market/chat/tobuyer(product_id=${information.product_id},buyer_id=${information.buyer_id})}">买家名称</a>
				</div>
			</div>
			</div>

		</div>
	</div>

</body>

</html>